<template>
    <section class="content">
        <navbar :title="$t('h_title.dailizhongxin')" :right_show="false" :type="1" ref="navbar"></navbar>
        <section class="cont">
            <h5>{{$t('dailizhongxin.tuiguanglianjie')}}</h5>
            <article class="cont-lianjie">
                {{this.$store.state.user.agenturl}}
            </article>
            <section class="btn">
                <button v-clipboard:copy="this.$store.state.user.agenturl"  v-clipboard:success="firstCopySuccess">{{$t('dailizhongxin.fuzhilianjie')}}</button>
                <button @click="erweima_fun">{{$t('dailizhongxin.erweimatuiguang')}}</button>
            </section>
            <section class="nav">
                <article>
                    <span>{{$t('dailizhongxin.yongjinfafang')}}</span>
                    <router-link to="/yongjinfafang">{{$t('common.genghuan')}}</router-link>
                </article>
                <article>
                    <span>{{$t('dailizhongxin.huiyuangcunkuang')}}</span>
                    <router-link to="/huiyuangcunkuang">{{$t('common.genghuan')}}</router-link>
                </article>
                <article>
                    <span>{{$t('dailizhongxin.huiyuangtixian')}}</span>
                    <router-link to="/huiyuangtixian">{{$t('common.genghuan')}}</router-link>
                </article>
                <article>
                    <span>{{$t('dailizhongxin.huiyuan')}}</span>
                    <router-link to="/huiyuan">{{$t('common.genghuan')}}</router-link>
                </article>
                <article>
                    <span>{{$t('dailizhongxin.huiyuanshuying')}}</span>
                    <router-link to="/huiyuanshuying">{{$t('common.genghuan')}}</router-link>
                </article>
            </section>
        </section>

        <van-popup v-model="show"><img :src="qrcode" alt="" style="width:8rem; display: block;"></van-popup>

        <article style="height: 1.4rem;"></article>
        <bottom></bottom>
    </section>
</template>

<script>
    import navbar from "@/components/navbar"
    import Bottom from "@/components/bottom"
    import {Popup} from 'vant'
    export default {
        name: "dailizhongxin",
        components: {
            navbar,
            Bottom,
            [Popup.name]: Popup,
        },
        data() {
            return{
                show: false
            }
        },
        methods: {
            firstCopySuccess() {
                this.$toast(this.$t('dailizhongxin.fuzhichenggong'));
            },
            erweima_fun() {
                this.$https.fetchPost('/m/qrcode',{}).then(res => {
					this.qrcode = res.data
                    this.show = true
                })
            }
        }
    }
</script>

<style scoped lang="less">
.cont{
    padding: .5rem;
    text-align: left;
    & > h5{
        padding-top: .2rem;
        color: #fff;
        font-size: .4rem;
        margin-bottom: .4rem;
    }
    .cont-lianjie{
        background: linear-gradient(#2c3134, #24292c);
        color: #fff;
        word-break: break-word;

        font-size: .38rem;
        padding: .4rem .4rem;
        border-radius: .2rem;
        margin-bottom: .7rem;
    }
    .btn{
        display: flex;
        justify-content: space-between;
        button{
            width: 49%;
            font-size: .42rem;
            color: #fff;
            border: none;
            line-height: 1.3rem;
            border-radius: .2rem;
            &:last-child{
                background: #24282c;
            }
            &:first-child{
                background: linear-gradient(to right, #ef6443 , #f8752c);
            }
        }
    }
    .nav{
        & > article{
            margin:0 auto;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #292d30;
            font-size: .44rem;
            line-height: 1.9rem;
            span{
                color: #fff;
            }
            a{
                color: #fa2663;
            }
        }
    }
}
</style>
